<template>
  <div>
      <el-row>
        <el-form :model="videoForm" :rules="rules" ref="videoForm" class="">
            <el-form-item label="vid" prop="vid" label-width="100px">
                <el-input v-model="videoForm.vid" placeholder="视频唯一Id"></el-input>
            </el-form-item>
            <el-form-item label="片名" prop="name" label-width="100px">
                <el-input v-model="videoForm.name" placeholder="片名"></el-input>
            </el-form-item>
            <el-form-item label="链接" prop="href" label-width="100px">
                <el-input v-model="videoForm.href" placeholder="链接"></el-input>
            </el-form-item>
            <el-form-item label="海报链接" prop="img" label-width="100px">
                <el-input v-model="videoForm.img" placeholder="海报链接"></el-input>
            </el-form-item>
                <el-image :src="videoForm.img" label-width="100px">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                </el-image>
            <el-form-item label="类别" prop="type" label-width="100px">
                <el-select v-model="videoForm.type" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.type"
                    :label="item.label"
                    :value="item.type">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否持续更新" prop="isUpdate" label-width="100px">
                <!-- <el-radio v-model="videoForm.isUpdate" @change="handleIsUpdateChange" label="1">持续更新</el-radio>
                <el-radio v-model="videoForm.isUpdate" @change="handleIsUpdateChange" label="0">不更新</el-radio> -->
                <el-switch
                v-model="checkShow"
                @change="handleIsUpdateChange"
                active-color="#13ce66"
                inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label="更新时间" prop="updateTime" label-width="100px" v-if="checkShow" >
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="videoForm.updateTime" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
            </el-form-item>
            <el-form-item label-width="100px">
                <el-button type="primary" @click="submitForm('videoForm')">提交</el-button>
                <el-button @click="resetForm('videoForm')">重置</el-button>
            </el-form-item>
        </el-form>
      </el-row>
  </div>
</template>

<script>

import { addVideo } from '../../api/videos'

const cityOptions = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
export default {
    name:'videos',
    data() {
        return {
            options: [
                {
                    type: '1',
                    label: '电影'
                },{
                    type: '2',
                    label: '电视剧'
                },{
                    type: '3',
                    label: '动漫'
                },{
                    type: '0',
                    label: '其他'
                }
            ],
            type: '选择分类',
            videoForm: {
                vid: '',
                name: '',
                href: '',
                img: '',
                type: '',
                updateTime: [],
                isUpdate: ''
            },
            rules: {

            },
            checkShow: false,
            checkAll: false,
            checkedCities: [],    // 默认选择
            cities: cityOptions,
            isIndeterminate: true
        }
    },
    methods: {
        // 更新时间多选
      handleCheckAllChange(val) {
        this.videoForm.updateTime = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      handleIsUpdateChange(val) {
          this.videoForm.isUpdate = checkShow ? 1 : 0
      },
      submitForm: function(formName) {
          this.$refs[formName].validate((valid) => {
              if(valid) {   // return true
                  let updateTime = this.videoForm.updateTime;
                  if (updateTime == '') {
                      this.videoForm.updateTime = 0;
                  }
                  this.videoForm.isUpdate = checkShow ? 1 : 0;
                  for (let i = 0; i < updateTime.length; i++) {
                        if (i == 0) {
                            this.videoForm.updateTime += updateTime[i];
                        } else {
                            this.videoForm.updateTime += '-' + updateTime[i];
                        }
                  }
                  console.log(this.videoForm)
                  addVideo(this.videoForm).then( res => {
                      if(res.code == 200){

                      }
                  })
              }
          })
      }
    }
}
</script>

<style>
.el-input,.el-select {
    width: 300px;
}
.el-button {
    width: 200px;
}
.el-image {
    position: absolute;
    left: 40%;
    top: 2%;
    width: 200px;
    height: 259px;
}
</style>